<!--分组方式-->
<template>
    <div class="grouping-method">
        <el-checkbox-group
            v-show="columnMethod === '1'"
            v-model="checkedData1" @change="handleCheckDataChange">
            <draggable
                class="checkbox-group"
                @end="dragEnd"
                :list="listData1"
                :option="{
                group: { name: 'site', animation: 300 },
                sort: true
                }">
                <transition-group class="group">
                    <el-checkbox v-for="item in listData1" :key="item" :label="item.value" border size="mini">{{item.name}}</el-checkbox>
                </transition-group>
            </draggable>
        </el-checkbox-group>
        <el-checkbox-group
            v-show="columnMethod === '2'"
            v-model="checkedData2" @change="handleCheckDataChange">
            <draggable
                class="checkbox-group"
                @end="dragEnd"
                :list="listData2"
                :option="{
                group: { name: 'site', animation: 300 },
                sort: true
                }">
                <transition-group class="group">
                    <el-checkbox v-for="item in listData2" :key="item" :label="item.value" border size="mini">{{item.name}}</el-checkbox>
                </transition-group>
            </draggable>
        </el-checkbox-group>
        <el-checkbox-group
            v-show="columnMethod === '3'"
            v-model="checkedData3" @change="handleCheckDataChange">
            <draggable
                class="checkbox-group"
                @end="dragEnd"
                :list="listData3"
                :option="{
                group: { name: 'site', animation: 300 },
                sort: true
                }">
                <transition-group class="group">
                    <el-checkbox v-for="item in listData3" :key="item" :label="item.value" border size="mini">{{item.name}}</el-checkbox>
                </transition-group>
            </draggable>
        </el-checkbox-group>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    import ajax from '@api/ajax'
    import {} from '@api/url'
    export default {
        name: 'GroupingMethod',
        components: {
            draggable
        },
        data () {
            return {
                listData: [
                    {
                        name: '成本额',
                        value: '1'
                    },
                    {
                        name: '销售额',
                        value: '2'
                    },
                    {
                        name: '本息',
                        value: '3'
                    }
                ],
                checkedData: [],
                array: [],
                array1: [],
                array2: [],
                array3: [],
                columnMethod: '',
                listData1: [],
                listData2: [],
                listData3: [],
                checkedData1: [],
                checkedData2: [],
                checkedData3: [],
                pageMode: 'add'
            }
        },
        methods: {
            getListData (val, columnMethod) {
                debugger
                if (this.pageMode == 'add') {
                    this.handleTreeValue(val, columnMethod)
                    this.getTempArray()
                }
                let param = {
                    selects: this.columnMethod === '1' ? this.array1 : this.columnMethod === '2' ? this.array2 : this.array3,
                    ordered: this.columnMethod === '1' ? this.listData1 : this.columnMethod === '2' ? this.listData2 : this.listData3
                }
                this.$emit('insertPlaceholder', param)
            },
            editData (dataValue, columnMethod) {
                debugger
                this.pageMode = 'edit'
                this.columnMethod = columnMethod
                let tempList = []
                dataValue.selects.forEach(item => {
                    tempList.push(item.value)
                })
                this.listData1 = []
                this.listData2 = []
                this.listData3 = []
                switch (this.columnMethod) {
                    case '1':
                        this.checkedData1 = tempList
                        console.info(this.checkedData1)
                        dataValue.ordered.forEach(item => {
                            this.listData1.push({
                                name: item.name,
                                value: item.value
                            })
                        })
                        break
                    case '2':
                        this.checkedData2 = tempList
                        dataValue.ordered.forEach(item => {
                            this.listData2.push({
                                name: item.name,
                                value: item.value
                            })
                        })
                        break
                    case '3':
                        this.checkedData3 = tempList
                        dataValue.ordered.forEach(item => {
                            this.listData3.push({
                                name: item.name,
                                value: item.value
                            })
                        })
                        break
                }
                this.getTempArray()
                let param = {
                    selects: this.columnMethod === '1' ? this.array1 : this.columnMethod === '2' ? this.array2 : this.array3,
                    ordered: this.columnMethod === '1' ? this.listData1 : this.columnMethod === '2' ? this.listData2 : this.listData3,
                    pageMode: 'edit'
                }
                this.$emit('insertPlaceholder', param)
            },
            // 接收树处理值
            handleTreeValue (val, columnMethod) {
                this.columnMethod = columnMethod
                if (val.length > 0) {
                    val.forEach(item => {
                        if (item.children.length > 0) {
                            item.children.forEach(tempItem => {
                                switch (this.columnMethod) {
                                    case '1':
                                        this.listData1.push({
                                            name: tempItem.name,
                                            value: tempItem.enName
                                        })
                                        break
                                    case '2':
                                        this.listData2.push({
                                            name: tempItem.name,
                                            value: tempItem.enName
                                        })
                                        break
                                    case '3':
                                        this.listData3.push({
                                            name: tempItem.name,
                                            value: tempItem.enName
                                        })
                                        break
                                }
                            })
                        }
                    })
                }
            },
            dragEnd () {
                this.getTempArray()
                let param = {
                    selects: this.columnMethod === '1' ? this.array1 : this.columnMethod === '2' ? this.array2 : this.array3,
                    ordered: this.columnMethod === '1' ? this.listData1 : this.columnMethod === '2' ? this.listData2 : this.listData3
                }
                this.$emit('insertPlaceholder', param)
            },
            handleCheckDataChange (val) {
                debugger
                switch (this.columnMethod) {
                    case '1':
                        this.checkedData1 = val
                        break
                    case '2':
                        this.checkedData2 = val
                        break
                    case '3':
                        this.checkedData3 = val
                }
                this.getTempArray()
                let param = {
                    selects: this.columnMethod === '1' ? this.array1 : this.columnMethod === '2' ? this.array2 : this.array3,
                    ordered: this.columnMethod === '1' ? this.listData1 : this.columnMethod === '2' ? this.listData2 : this.listData3
                }
                this.$emit('insertPlaceholder', param)
            },
            getTempArray () {
               switch (this.columnMethod) {
                    case '1':
                        this.array1 = []
                        for (let i = 0; i < this.listData1.length; i++) {
                            let listItem = this.listData1[i]
                            for (let j = 0; j < this.checkedData1.length; j++) {
                                let checkedItem = this.checkedData1[j]
                                if (listItem.value === checkedItem) {
                                    this.array1.push({
                                        name: listItem.name,
                                        value: listItem.value
                                    })
                                }
                            }
                        }
                        break
                   case '2':
                       this.array2 = []
                       for (let i = 0; i < this.listData2.length; i++) {
                           let listItem = this.listData2[i]
                           for (let j = 0; j < this.checkedData2.length; j++) {
                               let checkedItem = this.checkedData2[j]
                               if (listItem.value === checkedItem) {
                                   this.array2.push({
                                       name: listItem.name,
                                       value: listItem.value
                                   })
                               }
                           }
                       }
                       break
                   case '3':
                       this.array3 = []
                       for (let i = 0; i < this.listData3.length; i++) {
                           let listItem = this.listData3[i]
                           for (let j = 0; j < this.checkedData3.length; j++) {
                               let checkedItem = this.checkedData3[j]
                               if (listItem.value === checkedItem) {
                                   this.array3.push({
                                       name: listItem.name,
                                       value: listItem.value
                                   })
                               }
                           }
                       }
                       break
               }
            }
        },
        created () {
            // let param = {
            //     selects: this.columnMethod === '1' ? this.array1 :this.columnMethod === '2' ? this.array2 : this.array3,
            //     ordered: this.columnMethod === '1' ? this.listData1 : this.columnMethod === '2' ? this.listData2 : this.listData3
            // }
            // this.$emit('insertPlaceholder', param)

        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .grouping-method
        .checkbox-group
            width 90%
            height 75px
            overflow auto
            border 1px solid #D8DCE5
            padding-top 5px
            .el-checkbox
                margin-left 10px
</style>
